import request from "@/utils/request";
import { FileAddFilled, PlusOutlined } from "@ant-design/icons";
import { Button, Input } from "antd";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { EditorFormProps } from "../declare";
import AddNotice from "./AddNotice";
import classNames from "classnames";
import styles from './style.less'


function getTop20Notice() {
  return request('/api/merchant/notice?pageSize=20&page=1')
}
export function useNoticeEditor(props: EditorFormProps) {
  const [all, setAll] = useState<any[]>([])
  const noticeRef = useRef();

  const handleAdd = useCallback(() => {
    noticeRef?.current?.edit();
  }, [])

  const handleSelected = useCallback((no) => {
    // no.actived = !no.actived
    const value = props.value?.value || []
    // value.push(no.id)
    const idx = value.indexOf(no.id)
    if (idx > -1) {
      value.splice(idx, 1)
    } else {
      value.push(no.id)
    }
    props.onChange({
      ...props.value,
      value: [...value],
      strcutData: all.filter(tx => value.includes(tx.id))
    })
  }, [props, all])

  const fetchNotice = () => {
    getTop20Notice().then(rs => {
      setAll(rs.data.list)
    })
  }

  useEffect(() => {
    fetchNotice();
  }, [])

  const allViews = useMemo(() => {
    return all.map(yx => {
      const v = { ...yx }
      if (props.value?.value?.includes(yx.id)) {
        v.actived = true
      }
      return v
    })
  }, [all, props.value])


  // const handleLayout = useCallback()

  return {
    noticeRef,
    handleAdd,
    allViews,
    fetchNotice,
    handleSelected
  }
}


/**
 * 公告编辑器
 * @param props 
 */
export function NoticeEditor(props: EditorFormProps) {

  const { handleAdd, allViews, handleSelected, noticeRef, fetchNotice } = useNoticeEditor(props)
  return (
    <div className={styles["notice-editor"]}>
      <div className={styles["notice-editor-item"]}>
        <div className={styles["notice-editor-item-label"]}>
          栏目名称
        </div>
        <div className={styles["notice-editor-item-value"]}>
          <Input
            placeholder="请输入"
            className={styles["notice-editor-item-input"]}
            value={props.value?.layoutName}
            onChange={v => {
              props.onChange({
                ...props.value,
                layoutName: v.target.value
              })
            }}
          />
        </div>
      </div>

      <div className={styles["notice-editor-item"]}>
        <div className={styles["notice-editor-item-label"]}>
          选择公告
          <Button type="link" icon={<PlusOutlined />} onClick={handleAdd}  >新建</Button>
        </div>
        <div className={styles["notice-editor-item-value"]}>
          <main className={styles['notice-editor-item-content']}>
            {
              allViews.map(no => (
                <div className={classNames(styles['notice-editor-item-y'], {
                  [styles.actived]: no.actived
                })}
                  onClick={() => handleSelected(no)}
                >
                  {no.name}
                </div>
              ))
            }
          </main>
        </div>
      </div>
      <AddNotice ref={noticeRef} callback={fetchNotice} />
    </div>
  )
}